<div class="container">
    <div class="grid-container align-items-center">
        <% items.forEach(function(item) { %>
        <div class="grid-item">
            <div class="image-container"
                style="max-width: 100%; overflow: hidden;">
                <img alt="Banner Image"
                    class="img-fluid"
                    src="<%= item.image_url %>"
                    style="width: 100%;
 object-fit: cover;">
            </div>
            <h2 class="mt-3" inline-edit="text"><%= item.title %></h2>
            <div>
                <p class="mb-0" inline-edit="text"><%= item.text %></p>
            </div>
        </div>
        <% }); %>
    </div>
</div>

<style>

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 gap: 2rem;
 padding: 1rem;
 overflow-x: auto;
 justify-content: center;
}

.grid-item {
 width: 100%;
 text-align: start; /* Changed from center to start */
}

.grid-item img {
 margin: 0 auto;
 display: block; /* This keeps images centered while text aligns to start */
}
</style>